<template>
  <swiper ref="swiper" v-if="banners.length">
    <swiper-item v-for="(item, index) in banners" :key="index">
      <a :href="item.link">
        <img :src="item.image" alt="" @load="imageLoad">
      </a>
    </swiper-item>
  </swiper>
</template>

<script>
import {Swiper, SwiperItem} from 'components/common/swiper'
export default {
  data() { 
     return {
        isLoad: false,
        banners:[
				  {
					"acm": "3.mce.2_10_1jhwa.43542.0.ccy5br4OlfK0Q.pos_0-m_454801-sd_119",
					"height": 962,
					"width": 513,
					"image": "http://pk0jkchof.bkt.clouddn.com/imgs/2020/95b5f4b6d6ed4b6f8f1eeabdb0ff826a.jpg",
					"link": "https://book.itheima.net/",
					"title": "黑马程序员"
          },
          {
            "acm": "3.mce.2_10_1ji16.43542.0.ccy5br4OlfK0R.pos_1-m_454889-sd_119",
            "height": 962,
            "width": 513,
            "image": "http://pk0jkchof.bkt.clouddn.com/imgs/2019/8962e2e1ff454828b7c509c359858ab2",
            "link": "https://book.itheima.net/",
            "title": "院校帮"
          }
        ]
      }
  },
  // props:{
  //   banners:{
  //     type:Array,
  //     default:[]
  //   }
  // },
  components: {
    Swiper,
    SwiperItem
  },

  methods: {
    // 监听 轮播图片 加载完
      imageLoad() {
        if (!this.isLoad) {        
          // this.$emit('swiperImageLoad')
          this.isLoad = true   // 通过变量 isLoad 记录当前发出去的事件，响应四次让其只发出去一次
        }
      }
  }
 }
</script>

<style  scoped>
</style>